<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>淘宝购物</title>
    </head>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <body>
		<!DOCTYPE html>
		<html>
		    <head>
		        <meta charset="UTF-8">
		        <title>淘宝购物</title>
				<style type="text/css">
					body{background-image:url(img/bk.JPG)}
				</style>
		    </head>
		    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
		    <body>
				<div style="width: 400px; margin:0 auto; ><--background-color: red"-->
				<form action="#">
					欢迎来到Tao购物</span><br>
					请填写信息注册后开始您的购物.</span><br>
				<div>
				<div style="width: 400px; margin:0 auto; ><--background-color: red"-->
				
		            邮箱：<input type="text" name="email" id="email"><span id="email_msg"></span><br>
		            用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>
		            密码：<input type="text" name="password" id="password"><span id="password_msg"></span><br>
		            确认密码：<input type="text" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br>
		            <!-- onclick="return checkForm() 如果checkForm返回值是true，就提交表单，否则不提交表单-->
		            <input type="submit" name="submit" value="确认注册" onclick="return checkForm()"/>
		        </form>
		    </body>
		    <script type="text/javascript">
		        //是否为空
		        function ifnull(txt){
		            if(txt.length==0){
		                return true;
		            }
		            var $reg=/\s+/;
		            return $reg.test(txt);
		        } 
				// 219970107 胡毅
		        //在id为email的元素失去焦点时进行邮箱的验证
		        $("#email").blur(function(){
		            if(ifnull($(this).val())){
		                $("#email_msg").html("邮箱不能为空");
		            }else{
		                var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
		                if(!$reg.test($("#email").val())){
		                    $("#email_msg").html("邮箱格式错误！");
		                }else{
		                    $("#email_msg").html("√").CSS("color","green");
		                }
		            }
		        });
		        //在id为username的元素失去焦点时进行用户名的验证
		        $("#username").blur(function(){
		            if(ifnull($(this).val())){
		                $("#username_msg").html("用户名不能为空");
		            }else{
		                var $reg=/^\w{6,}$/;
		                if(!$reg.test($("#username").val())){
		                    $("#username_msg").html("用户名至少要6位哦");
		                }else{
		                    $("#username_msg").html("√");
		                }
		            }
		        });
		        //在id为password的元素失去焦点时进行密码的验证
		        $("#password").blur(function(){
		            if(ifnull($(this).val())){
		                $("#password_msg").html("用户名不能为空");
		            }else{
		                var $reg=/^\w{6,}$/;
		                if(!$reg.test($("#password").val())){
		                    $("#password_msg").html("密码至少要6位哦");
		                }else{
		                    $("#password_msg").html("√");
		                }
		            }
		        });
 //在id为repassword的元素失去焦点时进行密码的验证
		        $("#repassword").blur(function(){
		            if(ifnull($(this).val())){
		                $("#repassword_msg").html("请确认密码");
		            }else{
		                if($("#password").val()!=$("#repassword").val()){
		                    $("#repassword_msg").html("两次密码不一致");
		                }else{
		                    $("#repassword_msg").html("√");
		                }
		            }
		        });
		// 219970107 胡毅
		        //验证表单
		        function checkForm(){
		            //验证邮箱
		            if(ifnull($("#email").val())){
		                $("#email_msg").html("邮箱不能为空！");
		                return false;
		            }else{
		                var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
		                if(!$reg.test($("#email").val())){
		                    $("#email_msg").html("邮箱格式错误！");
		                    return false;
		                }
		            }
		            //验证用户名
		            if(ifnull($("#username").val())){
		                $("#username_msg").html("用户名不能为空！");
		                return false;
		            }else{
		                var $reg=/^\w{6,}$/;
		                if(!$reg.test($("#username").val())){
		                    $("#username_msg").html("用户名至少6位");
		                    return false;
		                }
		            }
		            //验证密码
		            if(ifnull($("#password").val())){
		                $("#password_msg").html("密码不能为空");
		                return false;
		            }else{
		                var $reg=/^\w{6,}$/;
		                if(!$reg.test($("#password").val())){
		                    $("#password_msg").html("密码至少6位");
		                    return false;
		                }
		            }
		            //确认密码是否为空
		            if(ifnull($("#repassword").val())){
		                $("#repassword_msg").html("请确认密码");
		                return false;
		            }
		            //验证两次密码是否一致
		            if($("#password").val()!=$("#repassword").val()){
		                $("#repassword_msg").html("两次密码不一致");
		                return false;
		            }
		            return true;
		        }
		    </script>
		</html>
		
		
		